// 在这里使用 vuex 管理动态路由
// 好处一: 可以做到动态路由缓存.
// 好处二: 数据是响应式的,当动态路由发生改变时,模板会自动 render 更新.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userRoutes: [] // 用户的路由信息
  },
  mutations: {
    setUserRoutes (state, payload) {
      state.userRoutes = payload
    }
  },
  actions: {
    async setUserRoutes ({ commit, getters, state }, url) {
      if (!state.userRoutes.length) {
        // 异步路由缓存
        const { data } = await axios.get(url)
        commit('setUserRoutes', data)
        return data
      }
      return getters.userRoutes
    }
  },
  getters: {
    userRoutes (state) {
      return state.userRoutes
    }
  }
})



